<script lang="tsx">
/**
 * 弹窗
 */
export default {
  name: "dialog-form"
}
</script>

<script lang="tsx" setup>
import DialogFormManager from "./dialog-form-manager.ts"
import {ref, watch} from "vue"

/**
 * 定义props
 */
const props = defineProps<{
  dialogFormModel: DialogFormManager;
}>()

/**
 * 弹窗模型
 */
const dialogFormModel = ref<DialogFormManager>()

/**
 * 可视性
 */
const visible = ref(false)

/**
 * 显示
 */
const show = () => {
  visible.value = true
}

/**
 * 关闭
 */
const close = () => {
  visible.value = false
}

/**
 * 监听
 */
watch(() => props.dialogFormModel, function (newValue) {
  if (newValue) {
    dialogFormModel.value = newValue
  }
}, {
  deep: true,
  immediate: true
})

/**
 * 暴露
 */
defineExpose({
  show,
  close
})
</script>

<template>
  <div v-if="dialogFormModel" class="form">
    <el-dialog v-model="visible" :before-close="close" :title="dialogFormModel?.title || '表单'"
               :width="dialogFormModel.width"
               destroy-on-close>
      <slot name="default"></slot>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped></style>